<script src="/js/validateIsMain.js"></script>
<div id="subContainer">
    <header class="page-header no-margin">
        <div class="container-fluid">
            <h2 class="no-margin-bottom" style="margin-top: 0px; font-size: 20px;">仓库</h2>
        </div>
    </header>

    <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
            <li class="breadcrumb-item"><a href="index.html">代码仓库</a></li>
            <li class="breadcrumb-item active">新建</li>
        </ul>
    </div>

    <section class="tables">
        <div class="container-fluid">
            <div class="row">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">创建仓库</h3>
                    </div>
                    <div class="card-body">
                        <form class="form-horizontal" id="addForm">
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">仓库名称：<span class="text-red">*</span></label>
                                <div class="col-sm-10">
                                    <input name="name" type="text" class="form-control" required placeholder="请为你的仓库命名方便日后查找"
                                           v-model="repository.name">
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">仓库地址：<span class="text-red">*</span></label>
                                <div class="col-sm-10">
                                    <input name="addr" type="text" class="form-control" required placeholder="https://gitee.com/meedesidy/docker-monitor.git"
                                           v-model="repository.addr">
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">连接用户：</label>
                                <div class="col-sm-10">
                                    <input name="authUser" type="text" class="form-control" placeholder="公开的项目不需要授权用户信息"
                                           v-model="repository.authUser">
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">连接密码：</label>
                                <div class="col-sm-10">
                                    <input name="authPass" type="text" class="form-control" placeholder="公开的项目不需要授权用户信息"
                                           v-model="repository.authPass">
                                </div>
                            </div>

                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">备注信息：</label>
                                <div class="col-sm-10">
                                    <input name="remark" type="text" class="form-control" placeholder="附带上你的备注吧"
                                           v-model="repository.remark">
                                </div>
                            </div>

                        </form>
                        <div class="form-group row">
                            <div class="col-sm-4 offset-sm-3">
                                <button type="button" class="btn btn-secondary" @click="cancel()">取消</button>
                                <button type="button" class="btn btn-primary" @click="saveForm()">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="main-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <p>Copyright &copy; 2019.Company name All rights reserved.More Templates <a
                            href="http://www.jq22.com/" target="_blank" title="jq22">jq22</a></p>
                </div>
                <div class="col-sm-6 text-right">
                    <p></p>
                </div>
            </div>
        </div>
    </footer>
</div>

<script>

    new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/survey/',
            pageInfo: {},
            repository: {
                name: '',
                remark: '',
                addr: '',
                image: "",
                authUser: '',
                authPass: ''
            }
        },
        created: function () {
        },
        watch: {
        },
        methods: {
            validForm() {
                return $("#addForm").valid();
            },
            saveForm() {
                let that = this;
                if (!this.validForm()) {
                    return;
                }
                AJAX.POST_JSON("/repository", this.repository, function (resp) {
                    toastr.success(resp.msg, "成功");
                    toPage("/pages/repository/index.html")
                });
            },
            cancel() {
                toPage("/pages/repository/index.html")
            },
            reduceVolume(index) {
                this.containerInfo.volumes.splice(index, 1);
            },
            addVolume(e) {
                let $inputs = $(e.target).parent().parent().find('input');
                for (let i = 0; i < $inputs.length; i++) {
                    if ($($inputs[i]).val() === null || $($inputs[i]).val() === '') {
                        return toastr.warning("还有未填写的变量", '警告');
                    }
                }
                this.containerInfo.volumes.push({fRoute: '', tRoute: ''})
            },
            reduceEnv(index) {
                this.containerInfo.envs.splice(index, 1);
            },
            addEnv(e) {
                let $inputs = $(e.target).parent().parent().find('input');
                for (let i = 0; i < $inputs.length; i++) {
                    if ($($inputs[i]).val() === null || $($inputs[i]).val() === '') {
                        return toastr.warning("还有未填写的变量", '警告');
                    }
                }
                this.containerInfo.envs.push({key: '', value: ''})
            },
            reducePort(index, item) {
                this.containerInfo.ports.splice(index, 1);
            },
            addPort(e) {
                let $inputs = $(e.target).parent().parent().find('input');
                for (let i = 0; i < $inputs.length; i++) {
                    if ($($inputs[i]).val() === null || $($inputs[i]).val() === '') {
                        return toastr.warning("还有未填写的端口", '警告');
                    }
                }
                this.containerInfo.ports.push({fPort: null, tPort: null})
            },
            initImagesSelector() {
                let that = this;
                AJAX.GET_SYNC("/images/all", {}, function (resp) {
                    that.images = resp.data;
                })
            }
        }
    });
</script>